<template>
    <div class="lineChart" ref="lineChart">
    </div>
</template>

<script>
import {getLineData} from '@/api/home'
import * as echarts from 'echarts'
export default {
    name:'lineChart',
    data(){
        return {
            lineDataList:[
                    
                ]
        }
    },
    methods:{
        // 获取数据
        getData(){
            getLineData().then(res => {
                this.lineDataList = res.data
                this.drawChart()
            })
        },
        drawChart(){
            let myChart = echarts.init(this.$refs.lineChart)
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '月份销售统计折线图',
                    textStyle:{
                        //文字颜色
                        color:'#303133',
                        //字体风格,'normal','italic','oblique'
                        fontStyle:'normal',
                        //字体大小
                        fontSize:14
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['华为', '魅族', 'OPPO', '努比亚', '苹果']
                },
                color:['#4cb9d8', '#fece84','#fd4f68','#93ce7c','#566ec4'],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2022年1月', '2022年2月', '2022年3月', '2022年4月', '2022年5月', '2022年6月', '2022年7月']
                },
                yAxis: {
                    type: 'value',
                    axisLine:{
                        show: false,
                    },
                    axisTick:{
                        show:false
                    },
                },
                series: this.lineDataList
            };
             // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    },
    mounted(){
        this.getData()
    }
}
</script>

<style lang="less" scoped>
.lineChart{
    width: 100%;
    height: 100%;
}
</style>